<template>
  <div id="app">
    <div id="market">
      <!--------------------------------------cart--------------------->
      <div class="head">
        <div class="wrapper clearfix">
          <div class="clearfix" id="top">
            <h1 class="fl"><a><img src="../img/YNU.png"/></a></h1>
            <div class="fr clearfix" id="top1">
              <p class="fl">
                <a href="login" id="login">登录</a>
                <a href="register" id="reg">注册</a>
              </p>
            </div>
          </div>
          <ul class="clearfix" id="bott">
            <li>
              <a href="shop">所有店铺</a>
            </li>
            <li>
              <a href="item?shopId=2">足球球衣</a>
            </li>
            <li>
              <a href="item?shopId=4">主机游戏</a>
            </li>
            <li><a href="orderList">我的订单</a></li>
          </ul>
        </div>
      </div>
      <div class="cart mt">
        <!-----------------site------------------->
        <div class="site">
          <p class=" wrapper clearfix">
            <span class="fl">购物车</span>
            <img class="top" src="../img/temp/cartTop01.png">
            <a href="shop" class="fr">继续购物&gt;</a>
          </p>
        </div>
        <!-----------------table------------------->
        <div class="table wrapper">
          <div class="tr">
            <div>商品</div>
            <div>单价</div>
            <div>数量</div>
            <div>小计</div>
            <div>操作</div>
          </div>
          <div class="th" v-for="(item,index) in dataList" :key="index">
            <div class="pro clearfix">
              <a class="fl" href="#">
                <dl class="clearfix">
                  <dt class="fl"><img v-bind:src="item.url" width="149" height="144"></dt>
                  <dd class="fl">
                    <p>{{item.itemname}}</p>
                  </dd>
                </dl>
              </a>
            </div>
            <div class="price">{{item.price}}</div>
            <div class="number">
              <p class="num clearfix">
                <img class="fl sub" src="../img/temp/sub.jpg" @click="downAmount(index)">
                <span class="fl">{{item.amount}}</span>
                <img class="fl add" src="../img/temp/add.jpg" @click="upAmount(index)">
              </p>
            </div>
            <div class="price sAll" >{{item.amount*item.price}}</div>
            <div class="price"><a class="del" href="#2" @click="deleteOrderItem(index)">删除</a></div>
          </div>

          <div class="tr clearfix">
            <p class="fr">
              <span>订单<small id="sl" >{{order.id}}</small></span>
              <span><small id="all" >{{order.status}}</small></span>
              <a  class="count" @click="cancelOrder()">取消</a>
              <a  class="count" @click="payOrder()">支付</a>
            </p>
          </div>
        </div>
      </div>
      <!--返回顶部-->
      <div class="gotop">
        <a href="orderList">
          <dl>
            <dt><img src="../img/gt1.png"/></dt>
            <dd>去购<br />物车</dd>
          </dl>
        </a>
        <a @click="logOut">
          <dl>
            <dt><img src="../img/logout.png"/></dt>
            <dd>退出<br />登录</dd>
          </dl>
        </a>
      </div>
      <!--footer-->
      <div class="footer">
        <div class="top">
          <div class="wrapper">
            <div class="clearfix">
              <a href="#2" class="fl"><img src="../img/foot1.png"/></a>
              <span class="fl">7天无理由退货</span>
            </div>
            <div class="clearfix">
              <a href="#2" class="fl"><img src="../img/foot2.png"/></a>
              <span class="fl">15天免费换货</span>
            </div>
            <div class="clearfix">
              <a href="#2" class="fl"><img src="../img/foot3.png"/></a>
              <span class="fl">满599包邮</span>
            </div>
            <div class="clearfix">
              <a href="#2" class="fl"><img src="../img/foot4.png"/></a>
              <span class="fl">手机特色服务</span>
            </div>
          </div>
        </div>
        <p class="dibu">云南大学&copy;软件设计体系期末作业 软件学院软件工程专业<br />
          违法和不良信息举报电话：10086-250-110</p>
      </div>
    </div>
  </div>
</template>

<script>
function GetQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}

export default {
  name: "CreateOrder",
  data() {
    return {
      dataList: [],
      order: {},
      orderId:0,
    }
  },
  created() {
    this.orderId=GetQueryString("orderId");
    this.findAll(this.orderId);
    this.getOrder(this.orderId);
  },
  methods: {
    //查询
    findAll(orderId) {
      if (orderId!=null)
      {
        this.$http({
          url: 'http://localhost:84/order/item/get/'+orderId}).then((res)=>{
          this.dataList = res.data.data;
        },(err)=>{
          if (err.response.status==403)
          {
            this.$message("未通过认证，请先登录或被授予权限");
          }
          else {
            console.log('err',err);
          }
        });
      }
      else {
        this.$http({
          url: 'http://localhost:84/order/item/get/4'}).then((res)=>{
          this.dataList = res.data.data;
        },(err)=>{
          console.log('err',err);
        });
      }
    },

    deleteOrderItem(index){
      this.$confirm("确认删除该订单项？","提示",{type:"warning"}).then(()=>{
        this.$http({
          url: 'http://localhost:84/order/item/delete/'+this.dataList[index].id,}).then((res)=>{
          if (!res.data.flag) {
            this.$message.error(res.data.message);
          } else {
            this.$message.success(res.data.message);
          }
          this.findAll(this.orderId);
          this.getOrder(this.orderId);
        },(err)=>{
          console.log('err',err);
        });
      });
    },

    getOrder(orderId){
      if (orderId!=null)
      {
        this.$http({
          url: 'http://localhost:84/order/get/'+orderId,}).then((res)=>{
          this.order = res.data.data;
        },(err)=>{
          console.log('err',err);
        });
      }
      else {
        this.$http({
          url: 'http://localhost:84/order/get/4'}).then((res)=>{
          this.order = res.data.data;
        },(err)=>{
          console.log('err',err);
        });
      }
    },

    payOrder(){
      this.$confirm("确认支付该订单？","提示",{type:"warning"}).then(()=>{
        this.$http({
          url: 'http://localhost:84/order/pay/'+this.order.id,}).then((res)=>{
          if (!res.data.flag) {
            this.$message.error(res.data.message);
          } else {
            this.$message.success(res.data.message);
          }
          this.findAll(this.orderId);
          this.getOrder(this.orderId);
        },(err)=>{
          console.log('err',err);
        });
      });
    },

    cancelOrder(){
      this.$confirm("确认取消该订单？","提示",{type:"warning"}).then(()=>{
        this.$http({
          url: 'http://localhost:84/order/delete/'+this.order.id,}).then((res)=>{
          if (!res.data.flag) {
            this.$message.error(res.data.message);
          } else {
            this.$message.success(res.data.message);
          }
          this.findAll(this.orderId);
          this.getOrder(this.orderId);
        },(err)=>{
          console.log('err',err);
        });
        // this.$router.push("shop");
      });
    },

    downAmount(index){
      this.$http({
        url: 'http://localhost:84/order/item/amount/down/'+this.dataList[index].id,}).then((res)=>{
        console.log(res);
        this.findAll(this.orderId);
        this.getOrder(this.orderId);
      },(err)=>{
        console.log('err',err);
      });
    },
    upAmount(index){
      this.$http({
        url: 'http://localhost:84/order/item/amount/up/'+this.dataList[index].id,}).then((res)=>{
        console.log(res);
        this.findAll(this.orderId);
        this.getOrder(this.orderId);
      },(err)=>{
        console.log('err',err);
      });
    },

    logOut(){
      this.$confirm("确认退出登录？", "提示", {type: 'warning'}).then(() => {
        this.$http.get("http://localhost:84/user/logout").then((res) => {
          if (!res.data.flag) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success(res.data.message)
          }
          sessionStorage.removeItem('token');
          this.$router.push({name:'UserLogin'});
        })
      });
    },
  }
}
</script>

<style scoped>
@import "../css/proList.css";
@import "../css/public.css";
</style>